<template>
    <div class="container" :style="'height: '+docheight+'px'">
      <leftcont></leftcont>
      <div class="righCont">
        <topcont></topcont>
        <div class="content">
          <div class="payTable">
            <div class="trendTop">举报列表({{ total }})</div>
            <div class="tableCont">
              <div class="tableSerchCont">
                <div class="serchItem">
                  <el-select v-model="handleVal" placeholder="请选择处理类型">
                    <el-option
                      v-for="(item,index) in handleArr"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                <div class="serchItem">
                  <el-input v-model="agent_name" placeholder="请输入举报编号"></el-input>
                </div>
                <div class="headBtn">
                  <btn value="搜索" @click="serchFn"></btn>
                </div>
              </div>
              <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    width="180"
                    show-overflow-tooltip
                    label="举报编号"
                  >
                  <template slot-scope="scope">
                    <div class="text_btn hasLine" @click="toUser(scope.row)">{{ scope.row.user_number }}</div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="create_time"
                  width="150"
                  show-overflow-tooltip
                  label="举报时间"
                >
                </el-table-column>
                <el-table-column
                    width="180"
                    show-overflow-tooltip
                    label="被举报编号"
                >
                <template slot-scope="scope">
                  <div class="text_btn hasLine" @click="toUser(scope.row)">{{ scope.row.report_user_number }}</div>
                </template>
                </el-table-column>
                <el-table-column
                  prop="report_content"
                  width="160"
                  show-overflow-tooltip
                  label="举报内容"
                >
                </el-table-column>
                <el-table-column
                  label="处理状态"
                >
                <template slot-scope="scope">
                  <div class="ctrolBtn">
                    <span class="blueBtn" v-if="scope.row.handle_status==1">待处理</span>
                    <span class="greenBtn" v-if="scope.row.handle_status==2">已处理</span>
                  </div>
                </template>
                </el-table-column>
                <el-table-column
                  prop="handle_time"
                  width="150"
                  show-overflow-tooltip
                  label="处理时间"
                >
                </el-table-column>
                <el-table-column
                    label="操作"
                  >
                  <template slot-scope="scope">
                    <div class="ctrolBtn">
                      <div class="blueBtn text_btn" v-if="scope.row.handle_status==1" @click="bindFn(scope.row)">处理</div>
                    </div>
                  </template>
                  </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  :current-page="page"
                  @current-change="pageFn"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
    import leftcont from '@/components/leftCont.vue'
    import topcont from '@/components/topCont.vue'
    import btn from '@/components/public/btn.vue'
    import bigImg from '@/components/public/bigImg.vue'
    import {report,handleReport} from "@/http/api"
  
    export default {
      components: {leftcont,topcont,btn,bigImg},
      data() {
        return {
          agent_name:'',
          handleVal:'',
          handleArr:[
            {
              value: '',
              label: '全部'
            },{
              value: '1',
              label: '待处理'
            },{
              value: '2',
              label: '已处理'
            }
          ],
          tableData:[{}],
          page:1,
          per_page:5,
          total:0,
        }
      },
      props: {},
      methods:{
        pageFn(index){
          this.page = index
          this.getdata()
        },
        serchFn(){
          this.page = 1
          this.total = 0
          this.getdata()
        },
        getdata(){
          var data ={
            number:this.agent_name,
            handle_status:this.handleVal,
            page:this.page,
            per_page:this.per_page
          }
          report(data).then((res)=>{
            if(res.data.code==1){
              this.tableData = res.data.data.data
              this.total = res.data.data.total
            }else{
              this.$message(res.data.msg)
            }
          }).catch((err)=>{
            this.$message('服务器请求超时');
          })
        },
        bindFn(item){
          this.$confirm('请确定是否解决了次举报问题, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let data ={
              report_id:item.report_id,
              handle_status:2,
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, 0.7)'
              });
              handleReport(data).then((res) =>{
                if(res.data.code==1){
                  this.$message({
                    type: 'success',
                    message: '操作成功!'
                  });
                  this.getdata()
                }else{
                  this.$message(res.data.msg)
                }
                loading.close()
            }).catch((err)=>{
              loading.close()
              this.$message('服务器请求超时');
            })
          })
        },
        toUser(item){
          this.$router.push({path:'/userCenterInfoDetail',query:{id:item.report_user_id}});
        }
      },
      mounted(){
      },
      created() {
        this.getdata()
      },
    }
  </script>
  
  <style scoped lang="less">
    .container{
      width: 100%;
      display: flex;
      overflow: hidden;
      .righCont{
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-left: 15px;
        height: 100%;
        width: 10px;
        background-color: #F4F8FF;
        .content{
          padding: 20px;
          box-sizing: border-box;
          width: 100%;
          flex: 1;
          overflow: auto;
          .payTable{
            margin-top: 20px;
            width: 100%;
            background-color: #fff;
            padding: 15px;
            box-sizing: border-box;
            .trendTop{
              font-weight: bold;
              font-size: 16px;
              cursor: pointer;
            }
            .tableCont{
              width: 100%;
              margin-top: 15px;
              .tableSerchCont{
                width: 100%;
                display: flex;
                justify-content: flex-end;
                margin-bottom: 10px;
                .serchItem{
                  width: 150px;
                  margin-left: 10px;
                }
                .headBtn{
                  margin-left: 10px;
                }
              }
              .text_btn{
                margin: 0 5px;
                cursor: pointer;
                font-size: 14px;
              }
              .hasLine{
                text-decoration: underline;
              }
              .ctrolBtn{
                display: flex;
                
                .redBtn{
                  color: #F56C6C;
                }
                .blueBtn{
                  color: #96A1FE;
                }
                .greenBtn{
                  color: #85CE61;
                }
  
              }
              .reportImg{
                img{
                    width: 30%;
                }
              }
              .pageCont{
                padding: 30px 0;
                display: flex;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  </style>
  